<script>
	import BaseLayout from '@/components/BaseLayout/index.vue';
	import {
		TOKEN_KEY
	} from '@/enums/cacheEnum';
	import {
		register
	} from '@/services/api/auth';
	import {
		deviceInfo,
		deviceLightBrightness
	} from '@/services/api/device';
	import {
		classificationList
	} from '@/services/api/regulate';
	import {
		getCache,
		setCache
	} from '@/utils/catch';

	import {
		mapActions
	} from 'vuex'

	export default {
		data() {
			return {
				// 设备序列号
				serialNumber: '',
				// latitude: '',
				// longitude: '',
				// serialNumber: 'ac:35.ee.69:a1.9f',
				// latitude: '36.619472',
				// longitude: '117.019599',
				deviceInfos: null,
				classificationLists: [],
				current: null
			}
		},
		components: {
			BaseLayout
		},
		onLoad() {
			const urlParams = new URLSearchParams(window.location.search);
			const serialNumber = getCache('serialNumber');
			serialNumber ? this.serialNumber = serialNumber : this.serialNumber = urlParams.get('serialNumber')
			// this.serialNumber = urlParams.get('serialNumber');
			// this.latitude = urlParams.get('latitude');
			// this.longitude = urlParams.get('longitude');
			setCache('serialNumber', this.serialNumber);
			const token = getCache(TOKEN_KEY);
			token ? this.getDeviceInfo() : this.handleLogin();
		},
		onShow() {},
		onHide() {},
		onUnload() {},
		methods: {
			...mapActions(['login', 'setDeviceInfo']),
			// 登陆
			handleLogin() {
				if (!this.serialNumber) {
					uni.showToast({
						icon: 'error',
						title: '暂无设备序列号'
					})
					return;
				}
				uni.showLoading({
					title: '正在登陆中'
				})
				this.login({
						serialNumber: this.serialNumber
					})
					.then(() => {
						uni.hideLoading()
						uni.showToast({
							icon: 'success',
							title: '登陆成功'
						})
						// 登陆成功 获取设备信息
						this.getDeviceInfo();
					})
					.catch((error) => {
						if (error.code === 8404) {
							uni.hideLoading()
							uni.showToast({
								icon: 'error',
								title: '未检测到用户,自动注册'
							})
							this.handleRegister();
							return;
						}
						uni.hideLoading()
						uni.showToast({
							icon: 'error',
							title: error.msg
						})
					});
			},
			// 注册
			handleRegister() {
				if (!this.serialNumber) {
					uni.showToast({
						icon: 'error',
						title: '暂无设备序列号'
					})
					return;
				}
				uni.showLoading({
					title: '正在注册中'
				})
				const data = {
					// latitude: this.latitude,
					// longitude: this.longitude,
					serialNumber: this.serialNumber
				};
				register(data)
					.then(() => {
						uni.hideLoading()
						uni.showToast({
							icon: 'success',
							title: '注册成功'
						})
						this.handleLogin();
					})
					.catch((err) => {
						console.log('注册失败', err);
						uni.hideLoading()
						uni.showToast({
							icon: 'error',
							title: '注册失败'
						})
					});
			},
			// 获取设备信息 判断设备是否激活
			getDeviceInfo() {
				deviceInfo()
					.then((res) => {
						this.deviceInfos = res.data;
						setCache('deviceInfo', res.data);
						this.setDeviceInfo(res.data);

						// 获取调理方案列表
						classificationList({}).then((res) => {
							this.classificationLists = res.rows
						})
					})
					.catch((err) => {
						if (err.code !== 401) {
							uni.showToast({
								icon: 'error',
								title: err.msg
							})
						}
					});
			},
			toSelect(cate) {
				this.current = cate
				const find = this.classificationLists.find(item => item.schemeTypeName == cate)
				uni.navigateTo({
					url: '/pages/regulate/select?cateId=' + find.id
				});
			},
		}
	}
</script>

<template>
	<view style="width: 100%;height: 100vh;position: relative;">
		<BaseLayout>
			<view class="bgbg"
				style="width: 685rpx;height: 85%;margin-top: 14rpx;margin-left: auto;margin-right: auto;display: flex;padding: 10rpx;">
				<view class="bgbgbg" style="width: 685rpx;height: 100%;margin: auto;padding: 10rpx;">
					<view class="top">
						<image src="../../static/images/home/left.png" mode="scaleToFill"
							style="width: 31rpx;height: 10rpx;" />
						<view class="txt">
							请选择分类
						</view>
						<image src="../../static/images/home/right.png" mode="scaleToFill"
							style="width: 31rpx;height: 10rpx;" />
					</view>
					<view class="cate">
						<view :class="current == '自选' ? 'item-active' : 'item'" style="margin-right: 30rpx;"
							@click="toSelect('自选')">
							<image :src="`../../static/images/home/zixuan${current == '自选' ? '1' : ''}.png`"
								mode="scaleToFill" style="width: 82rpx;height: 88rpx;" />
							<view class="txt">
								自选
							</view>
						</view>
						<view :class="current == '优选' ? 'item-active' : 'item'" @click="toSelect('优选')">
							<image :src="`../../static/images/home/youxuan${current == '优选' ? '1' : ''}.png`"
								mode="scaleToFill" style="width: 82rpx;height: 88rpx;" />
							<view class="txt">
								优选
							</view>
						</view>
					</view>
				</view>
			</view>
		</BaseLayout>
		<!-- <tm-message ref="msg" /> -->
	</view>
</template>

<style lang="scss" scoped>
	.bg-dialog {
		background: url('../../static/images/tltzts.png');
		background-size: 100% 100%;
		position: absolute;
		top: 35%;
		left: 35%;
		animation: fadeInUp 1s;
	}

	@keyframes fadeInUp {
		0% {
			opacity: 0;
			transform: translateY(20px);
		}

		100% {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.bgbg {
		background: url('../../static/images/tlfa_icon_bjk.png');
		background-size: 100% 100%;
	}

	.bgbgbg {
		background: url('../../static/images/kstl_icon_dk.png');
		background-size: 100% 100%;
	}

	.top {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 10rpx;

		.txt {
			font-size: 19rpx;
			color: #FFFFFF;
			line-height: 23rpx;
			letter-spacing: 4px;
			text-shadow: 0px 1px 4px rgba(255, 255, 255, 0.2);
			margin: 0 6rpx;
		}
	}

	.cate {
		display: flex;
		justify-content: center;
		margin-top: 10rpx;

		.item {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 175rpx;
			height: 175rpx;
			background: url('../../static/images/home/noactive.png');
			background-size: 100% 100%;


			.txt {
				font-weight: 500;
				font-size: 14rpx;
				color: #FFFFFF;
				line-height: 20rpx;
				margin-top: 7rpx;
			}
		}

		.item-active {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 175rpx;
			height: 175rpx;
			background: url('../../static/images/home/active.png');
			background-size: 100% 100%;


			.txt {
				font-weight: 500;
				font-size: 14rpx;
				color: #00D3FF;
				line-height: 20rpx;
				margin-top: 7rpx;
			}
		}
	}

	.bg1 {
		background: url('../../static/images/tlfa_icon_yhxx.png');
		background-size: 100% 100%;
	}

	.bg2 {
		background: url('../../static/images/bg2.png');
		background-size: 100% 100%;
	}

	.bg3 {
		background: url('../../static/images/syli_icon_dt.png');
		background-size: 100% 100%;
	}

	.text1 {
		font-size: 14rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #ffffff;
		margin-top: 20rpx;
		background: linear-gradient(0deg, #0adfff 0%, #ffffff 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.bd1 {
		border: 0.3rpx solid #ffffff;
	}
</style>